<template>
  <div id="personSearch">
    <!-- <x-header>车辆追踪</x-header> -->
    <x-header :left-options="{showBack: false}" v-if="allMap.info !==''" class="infoSearch" >{{allMap.info}}</x-header>
      <search
      @result-click="resultClick"
      @on-change="getResult"
      :results="results"
      v-model="value"
      position="absolute"
      auto-scroll-to-top
      top="0px"
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      ref="search"></search>
    <div id="allmap" style="height: 100%;"></div>
  </div>
</template>

<script>
import axios from 'axios';
import {gcj02tobd09} from '../assets/position';
export default {
  name: 'Header',
  data () {
    return {
      allMap: {
        map: null,
        info: ''
      },
      personIcon: '/static/人.png',
      UserPosition: '/static/当前位置.png',      
      allperson: [],
      value: '',
      map: null,
      results: []
      // allperson: []
    }
  },
  created () {
    this.$nextTick(() => {
      let AreaId = window.localStorage.getItem('id');
      this.map = JSON.parse(window.sessionStorage.getItem('map'));
      this.allMap.map = new BMap.Map('allmap')
      var navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
      this.allMap.map.addControl(navigation);
      this.allMap.map.enableScrollWheelZoom(true);
      var point = new BMap.Point(this.map.lng, this.map.lat); // 创建点坐标
      this.allMap.map.centerAndZoom(point, 11 );
      var user = new BMap.Point(this.map.lng, this.map.lat);
      var myIcon = new BMap.Icon(this.UserPosition, new BMap.Size(40,40));
      var Usermarker = new BMap.Marker(user, {icon: myIcon});  // 创建标注
      this.allMap.map.addOverlay(Usermarker);              // 将标注添加到地图中
      Usermarker.setTop(true);
      Usermarker.disableMassClear();
      // this.getData()
      axios.post('/api/wechat/getPersonByDept', {
        id: AreaId
      }).then((res) => {
      // let data = res.data.data;
       let data = [];
        for (let i = 0,len = res.data.data.length; i < len; i++) {
          let gcj = gcj02tobd09(res.data.data[i].lat, res.data.data[i].lng);
          res.data.data[i].lng = gcj[0];
          res.data.data[i].lat = gcj[1];   
          data = res.data.data;
        }
        this.allperson = data;
      });
    })
  },
  methods: {
    // getddd () {
    //   this
    // },
    setFocus () {
      // this.$refs.search.setFocus()
    },
    getaaa (personId) {
      personId = String(personId)
      axios.post('/api/wechat/getOnePersonById', {
        id: personId
        }).then((res) => {
          // console.log(res.data.data);
          let data = res.data.data;
          this.getData(data);
          this.getpp(data);          
          // this.allperson = res.data.data;
        // console.log(this.allperson)
      });
    },
    resultClick (item) {
      this.allMap.map.clearOverlays()      
      // this.getData(item);
      // this.getpp(item);
      this.getaaa(item.id);
    },
    getResult (val) {
      if (val === '') {
        this.results = [];
      } else {
        // var reg = new RegExp(val);
        // console.log('on-change', val)
        this.getre(val)
      }
    },
    getpp (data) {  
      let gcj = gcj02tobd09(data.lat, data.lng)
      var pt = new BMap.Point(gcj[0], gcj[1]);
      var myIcon = new BMap.Icon(this.personIcon, new BMap.Size(30,40));
      var marker2 = new BMap.Marker(pt, {icon:myIcon});  // 创建标注
      this.allMap.map.addOverlay(marker2);              // 将标注添加到地图中
      var label = new BMap.Label(data.name, {offset:new BMap.Size(0,40)});
      label.setStyle({
        border: '1px solid',
        color: '#000'
      })
      marker2.setLabel(label);
    },
    getre (val) {
      this.results = [];
      var reg = new RegExp(val);
      for (const key in this.allperson) {
        if (this.allperson.hasOwnProperty(key)) {
          const element = this.allperson[key];
          if (reg.test(element.name)) {
            this.results.push({
              title: element.name,
              lat: element.lat,
              lng: element.lng,
              id: element.id
            });
          }
        }
      }
    },
    onSubmit () {
      this.$refs.search.setBlur()
      this.$vux.toast.show({
        type: 'text',
        position: 'top',
        text: 'on submit'
      })
    },
    onFocus () {
      // console.log('on focus')
    },
    onCancel () {
      this.results = [];
      // console.log('on cancel')
    },
    getData (data) {
      let gcj = gcj02tobd09(data.lat, data.lng)      
      // let that = this;
      var output = "距离: ";
      var searchComplete = function (results) {
        if (walking.getStatus() !== BMAP_STATUS_SUCCESS) {
          return false;
        }
        var plan = results.getPlan(0);
        output += plan.getDistance(true) + "\n";
      }
      var walking = new BMap.WalkingRoute(this.allMap.map, {renderOptions: {map: this.allMap.map},
        onSearchComplete: searchComplete,
        onPolylinesSet: () => {
          this.allMap.info = output;
        },
        onMarkersSet:(pois) => {
          this.allMap.map.removeOverlay(pois[0].marker); //删除起点
          this.allMap.map.removeOverlay(pois[1].marker); //删除起点          
        }
      });
      var start = new BMap.Point(this.map.lng, this.map.lat);
      var end = new BMap.Point(gcj[0], gcj[1]);
      walking.search(start, end);
    }
  }
}
</script>

<style lang="less">
#personSearch {
  height: 100%;
  position: relative;
  bottom: 50px;
  .weui-search-bar {
    top: 50px;
    z-index: 111;;
    position: absolute;
    width: 100%;
  }
  .weui-search-bar__box {
    padding-left: 50px;
  }
  .weui-search-bar  {
    padding: 12px;
  }
  .weui-icon-search {
    left: 10px;
    line-height: 38px;
  }
  .weui-search-bar__cancel-btn {
    line-height: 38px;
    text-decoration: none;
  }
  .weui-search-bar__box .weui-search-bar__input {
    height: 30px;
  }
  .weui-search-bar__box .weui-icon-clear {
    line-height: 38px;
  }
  .weui-search-bar__box .weui-icon-search {
    line-height: 38px;
  }
  .vux-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
  }
  .infoSearch {
    position: fixed;
    text-align: center;
    top: 60px;
    z-index: 2;
    background: #9e9e9e;
    opacity: .6;
    width: 100%;
    color:#fff;
  }
  .weui-cells.vux-search_show {
    top: 60px;
  }
}
#personSearch .mint-header-button {
  flex: .4;
}
#personSearch .is-fixed {
  text-align: left;
}
.mint-search {
  height: 33px;
  /* height: 100vh; */
  overflow: hidden;
  width: 50%;
  /* text-align: center; */
  position: absolute;
  top: 3px;
  left: 22%;
}
.mint-searchbar {
  background: none;
  padding: 0;
} 
.weui-cell {
  padding: 4px 15px!important;
  height: 40px;
  text-align: left;
}
.weui-cells.vux-search_show .weui-cell:last-child {
  margin-bottom: 0!important;
} 
</style>
